@using AntDesign.Charts
@inject NavigationManager NavigationManager
@inject HttpClient HttpClient

<Tabs ActiveKeyChanged="OnTabChanged">
    <TabPane Key="1">
        <Tab>示例1</Tab>
        <ChildContent>
            <Bubble @ref="chart1" Data="data1" Config="config1" />
        </ChildContent>
    </TabPane>

    <TabPane Key="2">
        <Tab>示例2</Tab>
        <ChildContent>
            <Bubble @ref="chart2" Data="data2" Config="config2" />
        </ChildContent>
    </TabPane>
</Tabs>

@code{


    IChartComponent chart1;
    SmokingRateItem[] data1;

    IChartComponent chart2;
    SmokingRateItem[] data2;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        OnTabChanged("1");
    }

    private async void OnTabChanged(string activeKey)
    {
        if (activeKey == "1")
        {
            data1 = await ChartsDemoData.SmokingRateAsync(NavigationManager, HttpClient);
            await chart1.ChangeData(data1);
        }
        else if (activeKey == "2")
        {
            data2 = await ChartsDemoData.SmokingRateAsync(NavigationManager, HttpClient);
            await chart2.ChangeData(data2);
        }
        else
        {

        }
    }

    #region 示例1

    //smoking-rate
    readonly BubbleConfig config1 = new BubbleConfig
    {
        XField = "change in female rate",
        YField = "change in male rate",
        SizeField = "pop",
        PointSize = new[] { 4, 30 },
        ColorField = new[] { "continent" },
        Color = new[] { "#ffd500", "#82cab2", "#193442", "#d18768", "#7e827a" },
        XAxis = new ValueTimeAxis
        {
            Visible = true,
            Max = 5,
            Min = -25
        }
    };

    #endregion 示例1

    #region 示例2

    //smoking-rate
    readonly BubbleConfig config2 = new BubbleConfig
    {
        XField = "change in female rate",
        YField = "change in male rate",
        SizeField = "pop",
        PointSize = new[] { 4, 30 },
        ColorField = new[] { "continent" },
        Color = new[] { "#ffd500", "#82cab2", "#193442", "#d18768", "#7e827a" },
        PointStyle = new GraphicStyle
        {
            Stroke = "#777777",
            LineWidth = 1,
            Opacity = 0.8,
        },
        XAxis = new ValueTimeAxis
        {
            Visible = true,
            Max = 5,
            Min = -25
        },
        Quadrant = new QuadrantConfig
        {
            Visible = true,
            XBaseline = 0,
            YBaseline = 0,

            RegionStyle = new object[]
            {
               new {fill = "#d8d0c0",opacity = 0.2,},
               new {fill = "#a3dda1",opacity = 0.1,},
               new {fill = "white",opacity = 0,},
               new {fill = "#d8d0c0",opacity = 0.2,},
                },
            Label = new Label
            {
                Text = new string[]
                {
                    "Female decrease,\nmale increase",
                    "Female & male decrease",
                    "Female &\n male increase",
                    "Male decrease,\nfemale increase",
                    }
            }

        }
    };

    #endregion 示例2

}